<template>
  <div class="manage-page">
    <!-- 页面标题 -->
    <div class="container-box">
      <div class="main-title">消息</div>
      <!-- 页面主体 -->
      <div class="main-content">
        <!-- 过滤搜索 -->
        <div class="query-box">
          <el-form
            ref="queryForm"
            inline
            label-position="left"
            label-width="44px"
            :model="queryForm"
            :rules="queryFormRules"
            size="small"
          >
            <el-row>
              <el-form-item label="标题">
                <el-input
                  v-model="queryForm.noticeTitle"
                  maxlength="16"
                  placeholder="请输入标题搜索"
                />
              </el-form-item>
              <el-form-item style="margin-left: 20px">
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="handleQuery"
                >
                  查询
                </el-button>
                <el-button icon="el-icon-refresh-right" @click="resetQuery">
                  重置
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="content-box">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        empty-text="暂无数据"
        @row-click="rowClick"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column
          label="类型"
          prop="noticeType"
          width="279"
          align="center"
        >
          <template #default="scope">
            <span  class="title-tip" :class="{ 'inactive': scope.row.readFlag === '0' }"></span
            >{{ noticeType[scope.row.noticeType] }}</template
          >
        </el-table-column>
        <el-table-column
          label="标题"
          prop="noticeTitle"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="时间" prop="createTime" width="279" align="center">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryForm.pageNum"
          :page-sizes="[10, 20, 30, 50, 100]"
          :limit.sync="queryForm.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <message-detail
      ref="messDetail"
      :title="titleName"
      :dialogForm="dialogForm"
      @handleSurnBtn="getList"
    />
    <!-- 年度计划 弹窗 -->
    <AnnualPlanDialog ref="annualPlanDialog" :dialogForm="dialogForm" :title="titleName"/>
  </div>
</template>

<script>
import {
  getMessageList,
  getMessage,
  getUnMessageCount,
  updateMessage,
} from "../../api/manage/messsage";

import messageDetail from "./childrenCpn/messageDetail.vue";
import AnnualPlanDialog from "../message/childrenCpn/annualPlanDialog"

export default {
  components: {
    messageDetail,AnnualPlanDialog
  },
  data() {
    return {
      titleName: "",
      dialogForm: {},
      noticeType: {
        0: "通知公告",
        1: "系统消息",
        2: "年度计划",
      },
      openDataScope: false,
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 10,
      loading: false,
      tableData: [
        { type: "1111", name: "系统消息", date: "2022-10-20", readFlag: "0" },
        { type: "1111", name: "通知公告", date: "2022-10-20" },
        { type: "1111", name: "测试", date: "2022-10-20" },
      ],
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      labelStyle: {
        width: "180px",
      },
    };
  },
  created() {
    this.getList();
    getUnMessageCount().then((res) => {
      console.log(res, "res");
    });
  },
  methods: {
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryForm = {
        pageSize: 10,
        pageNum: 1,
      };
      this.getList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum = val;
      this.getDataList();
    },

    // 弹框确认
    cancelDataScope() {
      this.getList();
      this.dialogForm = {};
      this.openDataScope = false;
    },
    rowClick(data) {
      const name = this.noticeType[data.noticeType] || '其他消息'
      this.titleName = name;
      this.dialogForm = data;
      if(data.noticeType == 2){
        this.$refs["annualPlanDialog"].openDataScope = true;
      }else{
        this.$refs["messDetail"].openDataScope = true;
      }
      if (data.readFlag == "0") {
        updateMessage(data.msgId).then((res) => {
          data.readFlag = 1
          const count = Math.random();
          this.$store.commit("message/UPDATE_MESSAGE", count);
        });
      }
    },

    getList() {
      getMessage(this.queryForm).then((res) => {
        console.log(res, "res");
        this.total = res.total;
        this.tableData = res.rows;
        // this.tableData = res.rows.filter(item=>item.msgStatus != 1)
        this.total = res.total;
      });
    },
    stateFormat(row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 16) {
        //最长固定显示4个字符
        return cellValue.slice(0, 16) + "...";
      }
      return cellValue;
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-page {
  width: 100%;
  padding: 16px;
  background: #f5f5f5;
  .container-box {
    width: 1648px;
    height: 129px;
    background: #fff;
    padding: 24px;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      margin-bottom: 24px;
    }
  }
  .content-box {
    width: 1648px;
    min-height: 664px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 10px;
    padding: 24px;
    .title-tip {
      &.inactive{
        background: #e35d4b;
      }
      background: transparent;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 6px;
      margin-right: 20px;
    }
    .pagination {
      width: 300px;
      margin: 0 auto;
    }
  }
}
</style>

<style lang="scss" scoped>
.manage-page {
  .el-form-item .el-input__inner {
    width: 280px;
  }
}
/* 弹出窗样式 */
.el-dialog__wrapper {
  ::v-deep .dialog-box {
    .download {
      color: blue;
    }
    .el-dialog__body {
      padding: 24px 69px 24px 69px;
      border-top: 1px solid #ebecef;
      border-bottom: 1px solid #ebecef;
      label {
        font-weight: 400 !important;
      }
    }
    .el-dialog__footer {
      padding: 16px 20px;
    }
    .el-dialog__headerbtn {
      background: url("../../assets/images/icon_dialog_close.png");
      background-size: 100%;
      width: 16px;
      height: 16px;
      .el-dialog__close {
        visibility: hidden;
      }
    }
  }
}
</style>
